<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ciallo～(∠・ω ∠)⌒☆</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#FF7EB9',
            secondary: '#8EA7E9',
            accent: '#FFD166',
            cutePink: '#FF9EBB',
            cuteBlue: '#9EC5FE',
            cuteYellow: '#FFE066',
            cutePurple: '#C495F0'
          },
          animation: {
            'float': 'float 3s ease-in-out infinite',
            'wiggle': 'wiggle 1s ease-in-out infinite',
            'danmu-left': 'danmuLeft 8s linear infinite',
            'danmu-right': 'danmuRight 10s linear infinite',
            'danmu-top': 'danmuTop 6s linear infinite'
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' }
            },
            wiggle: {
              '0%, 100%': { transform: 'rotate(-3deg)' },
              '50%': { transform: 'rotate(3deg)' }
            },
            danmuLeft: {
              '0%': { transform: 'translateX(100vw)' },
              '100%': { transform: 'translateX(-100%)' }
            },
            danmuRight: {
              '0%': { transform: 'translateX(-100%)' },
              '100%': { transform: 'translateX(100vw)' }
            },
            danmuTop: {
              '0%': { transform: 'translateY(-100%)' },
              '100%': { transform: 'translateY(100vh)' }
            }
          }
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow-lg {
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
      }
      .animate-float-delayed {
        animation: float 3s ease-in-out 1s infinite;
      }
      .danmu-item {
        position: absolute;
        white-space: nowrap;
        pointer-events: none;
        z-index: 40;
      }
    }
  </style>
</head>
<body class="bg-gradient-to-br from-pink-50 to-purple-50 min-h-screen font-sans overflow-x-hidden">
  <!-- 顶部装饰 -->
  <div class="fixed top-0 left-0 w-full h-20 pointer-events-none z-50 overflow-hidden">
    <div class="absolute top-[-20px] left-[10%] w-16 h-16 bg-primary/30 rounded-full animate-float"></div>
    <div class="absolute top-[-10px] left-[30%] w-10 h-10 bg-secondary/30 rounded-full animate-float-delayed"></div>
    <div class="absolute top-[-15px] left-[60%] w-12 h-12 bg-accent/30 rounded-full animate-float"></div>
    <div class="absolute top-[-5px] left-[85%] w-8 h-8 bg-primary/30 rounded-full animate-float-delayed"></div>
  </div>

  <!-- 弹幕容器 -->
  <div id="danmu-container" class="fixed inset-0 pointer-events-none z-40"></div>

  <!-- 主容器 -->
  <div class="container mx-auto px-4 py-12 relative z-10">
    <!-- 标题区域 -->
    <header class="text-center mb-10">
      <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-primary text-shadow-lg mb-3">
        Ciallo～(∠・ω ∠)⌒☆
      </h1>
    </header>

    <!-- 主要内容区 -->
    <main class="max-w-5xl mx-auto">
      <!-- 中央互动元素 -->
      <div class="flex flex-col items-center justify-center gap-8 mb-16">
        <div class="relative w-64 h-64 animate-float">
          <div class="absolute inset-0 bg-primary/20 rounded-full blur-xl"></div>
          <!-- 中央点击元素 -->
          <div id="center-interact" class="w-full h-full bg-gradient-to-br from-pink-200 to-purple-200 rounded-full border-4 border-white shadow-lg z-10 relative flex items-center justify-center cursor-pointer hover:scale-105 transition-transform duration-300">
            <i class="fa fa-smile-o text-6xl text-white"></i>
          </div>
        </div>
      </div>

      <!-- 底部互动元素 -->
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
        <div class="interaction-item group relative bg-white/60 backdrop-blur rounded-2xl p-4 text-center shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer">
          <div class="w-20 h-20 mx-auto bg-primary/20 rounded-full flex items-center justify-center mb-2 group-hover:bg-primary/30 transition-colors">
            <i class="fa fa-heart text-3xl text-primary group-hover:scale-110 transition-transform"></i>
          </div>
          <p class="text-sm">Ciallo～(∠・ω ∠)⌒☆</p>
        </div>
        
        <div class="interaction-item group relative bg-white/60 backdrop-blur rounded-2xl p-4 text-center shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer">
          <div class="w-20 h-20 mx-auto bg-secondary/20 rounded-full flex items-center justify-center mb-2 group-hover:bg-secondary/30 transition-colors">
            <i class="fa fa-star text-3xl text-secondary group-hover:scale-110 transition-transform"></i>
          </div>
          <p class="text-sm">Ciallo～(∠・ω ∠)⌒☆</p>
        </div>
        
        <div class="interaction-item group relative bg-white/60 backdrop-blur rounded-2xl p-4 text-center shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer">
          <div class="w-20 h-20 mx-auto bg-accent/20 rounded-full flex items-center justify-center mb-2 group-hover:bg-accent/30 transition-colors">
            <i class="fa fa-smile-o text-3xl text-accent group-hover:scale-110 transition-transform"></i>
          </div>
          <p class="text-sm">Ciallo～(∠・ω ∠)⌒☆</p>
        </div>
        
        <div class="interaction-item group relative bg-white/60 backdrop-blur rounded-2xl p-4 text-center shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer">
          <div class="w-20 h-20 mx-auto bg-primary/20 rounded-full flex items-center justify-center mb-2 group-hover:bg-primary/30 transition-colors">
            <i class="fa fa-moon-o text-3xl text-primary group-hover:scale-110 transition-transform"></i>
          </div>
          <p class="text-sm">Ciallo～(∠・ω ∠)⌒☆</p>
        </div>
      </div>

      <!-- 底部触发按钮 -->
      <div class="flex justify-center mt-10">
        <button id="danmu-btn" class="bg-primary hover:bg-primary/80 text-white px-6 py-3 rounded-full shadow-md transition-all duration-300 text-lg hover:scale-105">
          Ciallo～(∠・ω ∠)⌒☆
        </button>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="text-center py-6 text-dark/50 text-sm mt-10">
      <p>Ciallo～(∠・ω ∠)⌒☆</p>
    </footer>
  </div>

  <!-- 漂浮元素容器 -->
  <div id="floating-elements" class="fixed inset-0 pointer-events-none z-0 overflow-hidden"></div>

  <script>
    // DOM元素获取
    const danmuContainer = document.getElementById('danmu-container');
    const centerInteract = document.getElementById('center-interact');
    const danmuBtn = document.getElementById('danmu-btn');
    const interactionItems = document.querySelectorAll('.interaction-item');
    const floatingElements = document.getElementById('floating-elements');

    // 弹幕配置：颜色、大小、动画方向
    const danmuColors = [
      'text-primary', 'text-secondary', 'text-accent', 
      'text-cutePink', 'text-cuteBlue', 'text-cuteYellow', 'text-cutePurple'
    ];
    const danmuSizes = ['text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl'];
    const danmuAnimations = ['animate-danmu-left', 'animate-danmu-right', 'animate-danmu-top'];
    const danmuText = 'Ciallo～(∠・ω ∠)⌒☆';

    // 生成随机弹幕
    function createDanmu(isTriggered = false) {
      const danmu = document.createElement('div');
      
      // 随机配置弹幕属性
      const randomColor = danmuColors[Math.floor(Math.random() * danmuColors.length)];
      const randomSize = danmuSizes[Math.floor(Math.random() * danmuSizes.length)];
      const randomAnimation = danmuAnimations[Math.floor(Math.random() * danmuAnimations.length)];
      
      // 设置弹幕样式与内容
      danmu.className = `danmu-item ${randomColor} ${randomSize} ${randomAnimation}`;
      danmu.textContent = danmuText;
      
      // 随机位置（根据动画方向设置不同定位）
      if (randomAnimation.includes('left') || randomAnimation.includes('right')) {
        // 左右滚动弹幕：随机垂直位置
        const randomTop = Math.floor(Math.random() * 80) + 10; // 10%-90% 高度
        danmu.style.top = `${randomTop}vh`;
      } else if (randomAnimation.includes('top')) {
        // 上下滚动弹幕：随机水平位置
        const randomLeft = Math.floor(Math.random() * 80) + 10; // 10%-90% 宽度
        danmu.style.left = `${randomLeft}vw`;
      }
      
      // 添加到容器
      danmuContainer.appendChild(danmu);
      
      // 弹幕结束后移除（避免DOM堆积）
      const animDuration = randomAnimation.includes('left') ? 8000 : 
                          randomAnimation.includes('right') ? 10000 : 6000;
      setTimeout(() => {
        danmu.remove();
      }, animDuration);
      
      // 触发式弹幕：一次性生成多个
      if (isTriggered) {
        for (let i = 0; i < 5; i++) {
          setTimeout(() => createDanmu(), i * 300);
        }
      }
    }

    // 生成漂浮图标元素
    function createFloatingElement(type, x, y) {
      const element = document.createElement('div');
      let icon, color, animation;
      
      switch(type) {
        case 'heart':
          icon = 'fa-heart';
          color = 'text-primary';
          animation = 'animate-bounce';
          break;
        case 'star':
          icon = 'fa-star';
          color = 'text-secondary';
          animation = 'animate-pulse';
          break;
        case 'smile':
          icon = 'fa-smile-o';
          color = 'text-accent';
          animation = 'animate-wiggle';
          break;
        case 'moon':
          icon = 'fa-moon-o';
          color = 'text-primary';
          animation = 'animate-float';
          break;
        default:
          icon = 'fa-heart';
          color = 'text-primary';
          animation = 'animate-float';
      }
      
      element.innerHTML = `<i class="fa ${icon} ${color} ${animation} text-2xl"></i>`;
      element.className = 'absolute pointer-events-none';
      element.style.left = `${x}px`;
      element.style.top = `${y}px`;
      element.style.zIndex = '10';
      element.style.opacity = '0.8';
      
      floatingElements.appendChild(element);
      
      // 上升消失动画
      element.animate([
        { transform: 'translateY(0)', opacity: 0.8 },
        { transform: `translateY(-100px)`, opacity: 0 }
      ], {
        duration: 3000,
        easing: 'ease-out'
      });
      
      // 移除元素
      setTimeout(() => {
        element.remove();
      }, 3000);
    }

    // 自动生成弹幕（定时）
    function autoGenerateDanmu() {
      setInterval(() => {
        createDanmu();
      }, 2000);
    }

    // 自动生成漂浮元素
    function autoGenerateFloating() {
      setInterval(() => {
        const x = Math.random() * window.innerWidth;
        const y = Math.random() * window.innerHeight;
        const types = ['heart', 'star', 'smile', 'moon'];
        const randomType = types[Math.floor(Math.random() * types.length)];
        createFloatingElement(randomType, x, y);
      }, 3000);
    }

    // 事件绑定：点击触发弹幕与漂浮元素
    centerInteract.addEventListener('click', (e) => {
      // 生成触发式弹幕
      createDanmu(true);
      // 生成漂浮元素（基于点击位置）
      const rect = centerInteract.getBoundingClientRect();
      const x = rect.left + rect.width / 2;
      const y = rect.top + rect.height / 2;
      createFloatingElement('smile', x, y);
    });

    danmuBtn.addEventListener('click', () => {
      // 按钮触发弹幕
      createDanmu(true);
    });

    interactionItems.forEach((item, index) => {
      const types = ['heart', 'star', 'smile', 'moon'];
      const type = types[index % types.length];
      
      item.addEventListener('click', (e) => {
        // 生成触发式弹幕
        createDanmu(true);
        // 生成对应类型漂浮元素
        const rect = item.getBoundingClientRect();
        const x = rect.left + rect.width / 2;
        const y = rect.top + rect.height / 2;
        createFloatingElement(type, x, y);
      });
    });

    // 页面加载初始化
    window.addEventListener('DOMContentLoaded', () => {
      autoGenerateDanmu();
      autoGenerateFloating();
      // 初始生成一批弹幕
      for (let i = 0; i < 3; i++) {
        setTimeout(() => createDanmu(), i * 500);
      }
    });
  </script>
</body>
</html>